import { customRef, watch } from 'vue'

/**
 * 控件的防抖输入
 * @param { object } props 组件的 props
 * @param { object } emit 组件的 emit
 * @param { number } delay 延迟时间，默认500毫秒
 * @param { string } name v-model的名称，默认 modelValue，用于emit
 */
 export default function debounceRef (props, emit = () => {}, delay = 500, name = 'modelValue') {
  // 计时器
  let timeout = null
  // 初始化设置属性值
  let _value = props[name]

  return customRef((track, trigger) => {
    // 监听父组件的属性变化，然后赋值，确保响应父组件设置属性
    watch(() => props[name], (v1) => {
      _value = v1
      trigger()
    })

    return {
      get () {
        track()
        return _value
      },
      set (val) {
        _value = val // 绑定值
        trigger() // 输入内容绑定到控件，但是不提交
        clearTimeout(timeout) // 清掉上一次的计时
        // 设置新的计时
        timeout = setTimeout(() => {
          emit(`update:${name}`, val) // 提交
        }, delay)
      }
    }
  })
}
